<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 60px;width: 100%;margin-bottom: 20px; padding: 0px;border-bottom: solid gray 1px">
        <el-page-header @back="this.$router.push('/')">
          <template #content>
            <div class="flex items-center">
              <el-image :src='headPic' style="width: 22px;height: 28px"/>
              <span class="text-large font-600 mr-3"> 速记 </span>
              <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">单词管理系统</span>
            </div>
          </template>
          <template #extra>
            <div  @click="drawer = true">
              <el-avatar :size="50" :src="circleUrl"></el-avatar>
            </div>
          </template>
        </el-page-header>


      </el-header>

<!--   菜单   -->
      <el-container>
        <el-aside width="20%"><el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-switch v-model="isCollapse" inactive-text="打开" active-text="收起" />
        </el-radio-group><el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
        >

          <el-menu-item  index="1" @click="changeOption(1)">
            <el-icon><Menu /></el-icon>
            <template #title>主页</template>
          </el-menu-item>
            <el-menu-item  index="2" @click="changeOption(2)">
            <el-icon><UserFilled /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item>
          <el-menu-item index="3" @click="changeOption(3)">
            <el-icon><Reading /></el-icon>
            <template #title>单词数据</template>
          </el-menu-item>
          <el-menu-item index="4" @click="changeOption(4)">
            <el-icon><Avatar /></el-icon>
            <template #title>角色管理</template>
          </el-menu-item>
        </el-menu>   </el-aside>

<!--   页面组件     -->
        <el-main>
          <Home v-if="index == 1"/>
          <User v-else-if="index == 2"/>
          <Word v-else-if="index == 3"/>
          <Role v-else-if="index == 4"/>
          <el-empty v-else description="空页面" />

        </el-main>
      </el-container>

    </el-container>
    <el-drawer style="opacity: 70%;background-color: black" v-model="drawer" title="个人信息" :with-header="false">
      <SelfMessage :selfMsg="this.$route.query.phoneNumber"/>
      <el-button  type="danger" plain style="position: absolute;bottom: 8%;right: 5%" @click="this.$router.push('/')">退出</el-button>
    </el-drawer>
  </div>

</template>

<script lang="ts" setup>
import SelfMessage from "../../components/SelfMessage/index.vue";
import Home from "../../components/Home/index.vue";
import User from "../../components/User/index.vue";
import Word from "../../components/Word/index.vue";
import Role from "../../components/Role/index.vue";
import Feedback from "../../components/Feedback/index.vue";
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'



const index=ref(1)
const drawer = ref(false)
const headPic = '/src/assets/headPic.png'
const isCollapse = ref(false)


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
/*改变页面选择*/
function changeOption(number){
  index.value = number;
  console.log(index.value)
}

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
el-badge:hover{
  background-color: blue;
}

</style>